@extends('common.base-master')

@section('html-title')
    <title>@if($plan){{$plan->title}} @endif</title>
@endsection

@section('html-head')
    <link rel="stylesheet" href="{{url('css/style.css')}}">
    <link rel="stylesheet" href="{{url('css/common.css')}}">
    <link rel="stylesheet" href="{{url('css/public.css')}}">
    <script src="{{url('js/jquery.countdown.min.js')}}"></script>
    <style>
        body{
            background-color: #f3f3f3;
        }

        .header{
            background-color: white;
        }
        .title-top{
            /*width: 100%;*/
            padding-top: 1.5rem;
            padding-left: 1.0rem;
            padding-right: 1.0rem;
            padding-bottom: 0.4rem;
            /*height: 1.8rem;*/
            max-height: 3.5rem;
            text-align: left;
            /*position: relative;*/
        }
        .header .title-top img{
            width: 17%;
        }
        .header .title-top p{
            top: 1.25rem;
            /*position: absolute;*/
            /*margin-left: 0.3rem;*/
            font-size: 0.9rem;
            text-overflow: ellipsis;
            max-height: 3.5rem;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            width: 100%;
        }
        .title-bottom{
            width: 90%;
            height: 1.8rem;
            text-align: left;
            padding-left: 1.0rem;
        }
        .author{
            color: #518CD2;
            font-size: 0.75rem;
        }
        .content-time{
            /*margin-left: 0.3rem;*/
            color: #9B9B9B;
        }
        .join{
            background-color: white;
            height: 2.8rem;
            position: fixed;
            width: 100%;
            bottom: 51px;
            z-index: 10;
        }
        .btn-join{
            width: 90%;
            left: 0.85rem;
            position: absolute;
            /*background-color: #5BA7FF;*/
            background-color: #1cac1b;
            height: 41px;
            top: 0.3rem;
            border: none;
            border-radius: 4px;
            color: #fff;
            font-size: 0.8rem;
        }
        .member-num{
            width: 100%;
            font-size: 0.80rem;
            height: 30px;
            color: #576b95;
            /*padding-left: 1.5rem;*/
        }
        .font-size-xregular p{
            margin: -1px;
            padding: 0;
            /*line-height: 0*/
        }
        .icon-xian{
            background: url({{url("images/icon-xian.png")}});
        }
        .more{
            background-color: white;
            width: 100%;
            position: relative;
            height: 2.5rem;
        }
        .icon-xian-left{
            width: 28%;
            height: 1rem;
            position: absolute;
            left: 0%;
            top: 0.15rem;
            background: url({{url('images/icon-xian.png')}});
        }
        .more span{
            position: absolute;
            left: 30%;
            color: #4a4a4a;
            font-size: 0.75rem;
        }
        .icon-xian-right{
            width: 28%;
            height: 1rem;
            position: absolute;
            right: 0%;
            top: 0.15rem;
            background: url({{url('images/icon-xian.png')}});
        }
        .icon-down{
            background: url({{url('images/down.png')}});
        }
        .share{
            position: absolute;
            right: 0rem;
            bottom: 0.8rem;
            width: 4rem;
        }
        .share-icon{
            width: 24px;
        }
        .share-text{
            width: 48%;
            position: absolute;
            bottom: 0.2rem;
            right: 0.7rem;
        }
        .share-cover{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            background-color: #000000;
            opacity: 0.7;
            display: none;
        }
        .shareDiv{
            position: fixed;
            right: 18px;
            top: 5px;
            z-index: 1001;
            display: none;
        }
        .shareDiv img{
            width: 260px;
            height: 180px;
        }
    </style>
@endsection

@section('html-body')
    <div>
        <!-- header -->
        <div class="header">
            <div class="title-top">
                {{--<img src="{{url('images/new.png')}}" />--}}
                <p>@if($plan){{$plan->title}} @endif</p>
            </div>
            <div class="title-bottom">
                <span class="content-time">原创：</span>
                <span class="author">@if($plan){{$plan->author}} @endif</span>
                <span class="content-time"><?php if($plan){echo date("m月d日",strtotime($plan->created_at));} ?></span>
            </div>
        </div>
        <!-- 文案 -->
        <div class="article_box">
            {{--class="weui-article"--}}
            <article class="weui-article" style="padding: 0;margin-bottom: 6.0rem">
                <!-- TODO：后台修改直接替换以下内容 -->
                <section style="margin-bottom:0;">
                    {{--<h1 class="article_title margin-t_0">@if($plan){{$plan->title}}@endif</h1>--}}
                    <section class="font-size-xregular" style="background-color: white;padding-left: 1.0rem;padding-right: 1.0rem;">
                        <?php if($plan){echo html_entity_decode($plan->free_content);} ?>
                        <?php if($plan && $plan->is_join == 1){echo html_entity_decode($plan->content);} ?>

                        <div style="width: 100%;position: relative;padding-bottom: 0.8rem;">
                           <div class="member-num">会员人数：{{$all_num}}</div>
                           <div class="share">
                               <img class="share-icon" src="{{url("images/share.png")}}" />
                               <div class="share-text">分享</div>
                           </div>
                        </div>
                       @if($plan && $plan->is_join != 1)
                        <div class="more">
                            <div class="icon-xian-left"></div>
                            <span>开通会员，阅读全文</span>
                            <div class="icon-xian-right"></div>
                            <div class="icon-down"></div>
                        </div>
                       @endif
                    </section>
                </section>
                <!-- /TODO：替换结束 -->
            </article>
        </div>

        <!--弹出层结束-->
        <div class="share-cover"></div>
        <div class="shareDiv">
            <img src="{{url('images/guide.png')}}" width="90%">
            <span id="closeX">X</span>
        </div>

        <div class="join">
            @if($plan && $plan->is_join != 1)
                <button class="btn-join">开通会员：￥@if($plan) {{$plan->amount}} @else 0 @endif</button>
            @else
                @if(!is_null($user->userinfo->job))
                <button class="btn-join" id="btn_has_join">你已成为会员，一起改变世界</button>
                    @else
                <button class="btn-join" id="btn_no_info">你已成为会员，待完善信息</button>
                @endif
            @endif
        </div>

        @include('common.new-menu')
    </div>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        $(function () {
            {{--var endTime = "@if($plan){{$plan->end_time}}@endif";--}}
            {{--$('#out_time').countdown(endTime, function(event) {--}}
                {{--$(this).html(event.strftime('%D 天'));--}}
{{--//                $(this).html(event.strftime('%D 天 %H:%M:%S'));--}}
            {{--});--}}

            $(".more").click(function () {
                $.alert("加入会员即可查看全文！","温馨提示",function () {
                    window.location.href="{{route('Home.Page.joinMember')}}";
                });
            });

            $(".btn-join").click(function () {
                startJoin();
                {{--window.location.href="{{route('Home.Page.joinMember')}}";--}}
            })

            $("#btn_has_join").click(function () {
                window.location.href="{{route('Home.Page.page',['tag'=>'has_join'])}}";
            })

            $("#btn_no_info").click(function () {
                window.location.href="{{route('Home.Page.joinMember')}}";
            })

           $(".share-cover").click(function () {
               $(".share-cover").hide();
               $(".shareDiv").hide();
           });
            
            $(".share").click(function () {
                $(".share-cover").show();
                $(".shareDiv").show();
            })

            function startJoin() {
                $.ajax({
                    type : "post",
                    url : "{{route('Api.Plan.startJoin')}}",//替换网址，xxx根据自己jssdk文件位置修改
                    dataType : "json",
                    data:{url:url},
                    success : function(obj){
                        if(obj.level == 'success'){
                            if(is_weixn()){
                                startJsApiPay(obj.data.order_num);
                            }else {
                                startH5Pay(obj.data.order_num);
                            }
                        }else{
                            if(obj.data == "no_login" || obj.data == "no_bind_phone"){
                                window.location.href = "{{route('Home.Page.login')}}";
                            }else {
                                alert("提交失败！");
                            }
                        }
                    },
                    error:function(data){
                       console.log(data);
                    }
                });
            }

            function is_weixn(){
                var ua = navigator.userAgent.toLowerCase();
                if(ua.match(/MicroMessenger/i)=="micromessenger") {
                    return true;
                } else {
                    return false;
                }
            }

            function startJsApiPay(order_num) {
                $.ajax({
                    type:"post",
                    url:'{{route('Api.Payment.payByWechatJsApi')}}',
                    dataType:"json",
                    data:{
                        order_num:order_num
                    },
                    success:function(obj){
                        if(obj.level == "success"){
                            $.hideLoading();
                            WXPayment(obj.data);
                        }else {
                            $.toast(obj.message, "forbidden");
                        }
                    },
                    error:function(obj){
                        console.log(obj);
                    }
                });
            }

            function startH5Pay(order_num) {
                $.ajax({
                    type:"post",
                    url:'{{route('Api.Payment.payByWechatH5')}}',
                    dataType:"json",
                    data:{
                        order_num:order_num
                    },
                    success:function(obj){
                        if(obj.level == "success"){
                            $.hideLoading();
                            window.location.href = obj.data;
                        }else {
                            $.toast(obj.message, "forbidden");
                        }
                    },
                    error:function(obj){
                        console.log(obj);
                    }
                });
            }

            function WXPayment(configJSON) {
                if (typeof WeixinJSBridge === 'undefined') {
                    $.toast('请在微信在打开页面', "forbidden");
                    return false;
                }
                WeixinJSBridge.invoke('getBrandWCPayRequest', configJSON, function (res) {
                    switch (res.err_msg) {
                        case 'get_brand_wcpay_request:cancel':
                            alert('用户取消支付！');
                            break;
                        case 'get_brand_wcpay_request:fail':
                            alert('支付失败！（' + res.err_desc + '）');
                            break;
                        case 'get_brand_wcpay_request:ok':
                            $.toast('支付成功',function () {
                                window.location.href='{{route('Home.Page.joinMember')}}';
                            });
                            break;
                        default:
                            alert(JSON.stringify(res));
                            break;
                    }
                });
            }

            //判断是否是微信中的浏览器
            var ua = navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) != "micromessenger") {
                $(".share").hide();
            }

                var imgUrl = "{{\App\Http\Services\FileManager::getImgFromOssUrl($share->img_id)}}";
                var lineLink = "{{$share->url}}";
                var descContent = '{{$share->desc}}';
                var shareTitle = '{{$share->title}}';

                var url=location.href;
                $.ajax({
                    type : "post",
                    url : "{{route('Api.Wechat.getJsApiPacket')}}",//替换网址，xxx根据自己jssdk文件位置修改
                    dataType : "json",
                    data:{url:url},
                    success : function(obj){
                        if(obj.level == 'success'){
                            var data = obj.data;
                            wx.config({
                                appId: data.appId,
                                timestamp: data.timestamp,
                                nonceStr: data.nonceStr,
                                signature: data.signature,
                                jsApiList: [
                                    "onMenuShareTimeline", //分享给好友
                                    "onMenuShareAppMessage", //分享到朋友圈
                                    "onMenuShareQQ", //分享到QQ
                                    "onMenuShareWeibo" //分享到微博
                                ]
                            });
                        }
                    },
                    error:function(data){
                        alert("连接失败！");
                    }
                });
                wx.ready(function (){
                    var shareData = {
                        title: shareTitle,
                        desc: descContent,//这里请特别注意是要去除html
                        link: lineLink,
                        imgUrl: imgUrl
                    };
                    wx.onMenuShareAppMessage(shareData);
                    wx.onMenuShareTimeline(shareData);
                    wx.onMenuShareQQ(shareData);
                    wx.onMenuShareWeibo(shareData);
                });
        });
    </script>
@endsection